import { Story, Preview, Meta } from '@storybook/addon-docs/blocks';

# Storybook Docs for Vue

Storybook supports every major view layer:
React, Vue, Angular, Ember, React Native, etc.

Storybook Docs does too.

<Story id="welcome--welcome" height="370px" />

Let's check out a Vue prototype to see how this works.

## Component Declaration

Just like in React, we first declare our component.

<Meta title="Addon|Docs" />

This declaration doesn't show up in the MDX output.

## SB5 "Classic" Vue Stories

Next let's declare some stories.

But first let's review how it's done in SB5 for Vue.

```
storiesOf('Button', module)
  .add('rounded', () => ({
    template: '<my-button :rounded="true">A Button with rounded edges</my-button>',
  }))
```

## MDX Stories

Similarly, here's how we do it in the Docs MDX format:

<Story name="rounded" height="60px">
  {{
    template: '<my-button :rounded="true">A Button with rounded edges</my-button>',
  }}
</Story>

This isn't the final syntax, but it gets the job done.

## Another one

Let's add another one. The UI updates automatically as you'd expect.

<Story name="square" height="60px">
  {{
    template: '<my-button :rounded="false">A Button with square edges</my-button>',
  }}
</Story>

## Longform docs

And just like in the React, case we're generating long-form docs as we go.

The primary difference is that for Vue Docs we generate an iframe per story.

## Optimization

This can be optimized using a library like [Vuera](https://github.com/akxcv/vuera)
for embedding Vue components in React.

We could also change the JSX rendering to render the entire page in Vue.

## Previews

Just like in React, we can easily reference other stories in our docs:

<Story id="addon-knobs--all-knobs" height="400px" />

<Story id="nonexistent-story" />

## More info

For more info, check out the [Storybook Docs Technical Preview](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing).

We want your feedback to help make this more useful.

Follow us on Twitter for more short demos & project updates! ❤️📈🛠
